<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      background-color: aqua;
    }
  </style>
</head>

<body>
  <!-- ​<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 
    在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 -->

  <!-- ​如果不给 <canvas> 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。
    所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高。 -->
      <canvas id="c" width="800" height="500" >
        你的浏览器不支持 canvas，请升级你的浏览器。
      </canvas>

      <script>
        // 获取标签
        let can =  document.querySelector("#c")
        // 获取绘图对象
        let ctx =  can.getContext("2d")
        console.log(ctx);
        // 设置填充图形
        ctx.fillStyle = "rgb(200,0,0)";
        // 设置填充图形 (x,y,width,height)
        ctx.fillRect(0,0,100,100)

        ctx.strokeStyle = "rgba(200,0,0,0.3)";
        ctx.strokeRect(100, 100, 100, 100);  //绘制矩形边框



      </script>

</body>

</html>